import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
import XHeader from 'vux/src/components/x-header'
import Scroller from 'vux/src/components/scroller'

@Component({
    template: require('./chatRoom.html'),
    components: { XHeader, Scroller }
})

export default class ChatRoom extends Vue {
    nickname: string = "nickname" // 用户昵称
    sendContent: string = ""; // 要发送的内容
    num: number = 1; // 当前聊天人数
    getContent: Array<any> = [{ name: "sys", content: "欢迎进入聊天室~", isMine: false }]; // 获取到的消息
    @Prop()
    nickName: any;
    @Watch("$route")
    getNickName() {
        this.nickname = this.nickName;
        // if (this.$route.query && this.$route.query.nickname) {
        //     this.nickname = this.$route.query.nickname
        // }
    }

    mounted() {
        this.getNickName();
        this.getContent[0].content = "欢迎" + this.nickname + "进入聊天室~"
        this.socket();
        window.onbeforeunload = () => {
            this.$socket.emit('onbeforeunload', {
                name: this.nickname
            })
        };
        window.onunload = () => {
            this.$socket.emit('logout', {
                name: this.nickname
            })
        };
    }

    socket() {
        this.$socket.on("connect", (msg: any) => {
            console.log('socket connect')
        });
        this.$socket.on("loginResult", (msg: any) => {
            this.num = msg.usersNum;
            if (msg.userName !== this.nickname) {
                this.$vux.toast.show({
                    type: 'text',
                    width: "10rem",
                    position: 'top',
                    text: `${msg.userName}加入群聊~`
                });
            }
        });
        this.$socket.on("logoutResult", (msg: any) => {
            console.log("logoutResult")
            // console.log(this.$route.query.nickname)
            console.log(this.nickname)
            console.log(msg.userName)
            this.num = msg.usersNum;
            if (msg.userName !== this.nickname) {
                this.$vux.toast.show({
                    type: 'text',
                    width: "10rem",
                    position: 'top',
                    text: `${msg.userName}退出群聊。`
                });
            }
        });
        this.$socket.on("onbeforeunloadResult", (msg: any) => {
            console.log("onbeforeunloadResult")
            // console.log(this.$route.query.nickname)
            console.log(this.nickname)
            console.log(msg.userName)
            this.num = msg.usersNum;
            if (msg.userName !== this.nickname) {
                this.$vux.toast.show({
                    type: 'text',
                    width: "10rem",
                    position: 'top',
                    text: `${msg.userName}退出群聊。`
                });
            }
        });
        this.$socket.on("send", (msg: any) => {
            if (msg.data.name === this.nickname) {
                this.getContent.push({ name: "", content: msg.data.content, isMine: true })
            } else {
                this.getContent.push({ name: msg.data.name, content: msg.data.content, isMine: false })
            }
        });

    }
    send() {
        if (this.sendContent === "") {
            return;
        }
        this.$socket.emit('send', {
            name: this.nickname,
            content: this.sendContent
        })
        this.sendContent = "";
    }

    destroyed() {
        console.log("99999")
        this.$socket.emit('logout', {
            name: this.nickname
        })
    }

    // goBack() {
    //     window.history.length > 1
    //         ? this.$router.go(-1)
    //         : this.$router.push('/')
    // }
}
